<script>
    
$(document).ready(function() {
	 
    $('#timepicker').datepicker({
        dateFormat: "yy-mm-dd",
        timeFormat: "HH:mm:ss"

    });
    $('#timepicker1').datepicker({
        dateFormat: "yy-mm-dd",
        timeFormat: "HH:mm:ss"

    });
   
  
  });

</script>
<?php $data= $this->arrParams;
	if(!isset($data['Starttime'])){
	$category = array();
	for($i = 0;$i<10;$i++){

	$date = new DateTime($i.' days ago');
	$category[$i] =  $date->format('d/m/Y');
	}
	}else{
	    
	$category = array();
	$category[] = $data['Starttime'];
	if($data['limit']==''){
			$data['limit']  = 10;
	}
	for($i = 1;$i<$data['limit'];$i++){
	$date = strtotime($data['Starttime']);
	$category[$i] =  date('Y-m-d',$date-86400);
	$data['Starttime'] =  date('Y-m-d',$date-86400);
	}	

	}
?>
<input id ="cat" type="hidden" value=<?php echo json_encode($category);?> />
<?php echo $this->search_form;?>
<?php 
	

	
?>
<div id="container" style="float:left;min-width: 100%; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
	var chart;
	var start = $("#timepicker1").val();
	var end   = $("#limit").val();
	var link = '/admin/user/compare-game-box-chart';
	
	if($.trim(start)!=''){
		link = link+'/Starttime/'+start;
		}
	if($.trim(end)!=''){
	link = link+'/limit/'+end; 
	}
	//alert(link);
    $(document).ready(function(){
        $.getJSON(link, function(data) {
        chart = new Highcharts.Chart({
       	 chart: {
          	  renderTo: 'container',
              type: 'column'
         },
         title: {
             text: 'Biểu đồ so sánh sự tăng trưởng user'
         },
         xAxis: {
             categories: $.parseJSON($("#cat").val()),
             labels: {
                 align : 'right',
                 rotation: -45
             }
         },
         yAxis: {
             min: 0,
             title: {
                 text: 'Số user đăng kí một ngày'
             }
         },
         tooltip: {
             pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
             shared: true
         },
         plotOptions: {
             column: {
                 stacking: 'percent'
             }
         },
             series: data
        });
        });
    });
</script>
<div id="user" style="height: 600px; width: 90%;float: right;padding-right: 2%;"></div>
<div style="clear: both;"></div>
